<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import icon_house_bt from '@/assets/imgs/ic_fwzs.png'
import icon_non_house_bt from '@/assets/imgs/ic_rzqys.png'
import icon_area_bt from '@/assets/imgs/ic_jzmj.png'
import icon_tb from '@/assets/imgs/img_tb.png'
import { getHouseOverview } from '../api.js'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const overviewInfo = ref([
  {
    title: '总栋数',
    value: 284396,
    unit: '栋'
  },
  {
    title: '总面积',
    value: 43127.85,
    unit: '万平'
  }
])

const typeInfo = ref([
  {
    title: '住宅',
    houseAccout: 152192,
    houseAccoutType: '数量',
    houseAccoutUnit: '(栋)',
    houseArea: 24732.23,
    houseAreaType: '面积',
    houseAreaUnit: '(万平)',
    img: icon_tb
  },
  {
    title: '非住宅',
    houseAccout: 152192,
    houseAccoutType: '数量',
    houseAccoutUnit: '数量(栋)',
    houseArea: 24732.23,
    houseAreaType: '面积',
    houseAreaUnit: '(万平)',
    img: icon_tb
  }
])

const distributionInfo = ref([
  {
    title: '住宅',
    value: 284396,
    unit: '栋',
    img: icon_house_bt
  },
  {
    title: '非住宅',
    value: 43127.85,
    unit: '栋',
    img: icon_non_house_bt
  },
  {
    title: '总面积',
    value: 43127.85,
    unit: '万平',
    img: icon_area_bt
  },
])

const updateDataOverview = (data) => {
  overviewInfo.value[0].value = data.houseNum
  overviewInfo.value[1].value = data.houseArea
}

const updateDataTypeInfo = (data) => {
  typeInfo.value[0].houseAccout = data.data[0].house_num
  typeInfo.value[0].houseArea = data.data[0].actual_area
  typeInfo.value[1].houseAccout = data.data[1].house_num
  typeInfo.value[1].houseArea = data.data[1].actual_area

  distributionInfo.value[0].value = data.data[0].house_num
  distributionInfo.value[1].value = data.data[1].house_num
  distributionInfo.value[2].value = data.data[0].actual_area + data.data[1].actual_area
}

const reqData = () => {
  getHouseOverview()
    .then((res) => {
      updateDataOverview(res.data)
      updateDataTypeInfo(res.data)
    })
    .catch((err) => {})
}


onMounted(() => {
  reqData()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="房屋概览" class="overview-card">
      <div class="overview-wrap">
        <div class="overview-box" v-for="(item, i) in overviewInfo">
          <div class="overview-value">{{ item.value }}</div>
          <div class="overview-title">{{ item.title }}</div>
          <div class="overview-unit">{{ item.unit }}</div>
        </div>
      </div>
    </card>

    <card name="类型分布" class="type-card">
      <div class="type-wrap">
        <div class="type-box" v-for="(item, i) in typeInfo">
          <div class="icon-wrap">
            <!-- <img class="img" :src="item.img" alt=""></img> -->
            <div class="icon-title">{{ item.title }}</div>
          </div>
          <div class="content-wrap">
            <div class="account content-item">
              <div class="content-item-value">{{ item.houseAccout }}</div>
              <div class="content-item-unit">
                <span>{{ item.houseAccoutType }}</span>
                <span class="unit">{{ item.houseAccoutUnit }}</span>
              </div>
            </div>
            <div class="area content-item">
              <div class="content-item-value">{{ item.houseArea }}</div>
              <div class="content-item-unit">
                <span>{{ item.houseAreaType }}</span>
                <span class="unit">{{ item.houseAreaUnit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </card>
    
    <card name="城区房屋分布" class="area-card">
      <div class="flex">
        <div class="box" v-for="(item, i) in distributionInfo" :key="i">
          <div class="box-value">
            <span class="value">{{ item.value }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="box-title">{{ item.title }}</div>
          <img class="img" :src="item.img" alt="">
        </div>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.left {
  color: #ccc;
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .overview-card {
    height: 320px;
    margin-bottom: var(--card-margin-bottom);

    .overview-wrap {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .overview-box {
        width: 200px;
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../../../../assets/imgs/img_tb.png");
        .overview-value {
          font-size: 24px;
          font-weight: bold;
        }
        .overview-title {
          margin-top: 4px;
          font-size: 14px;
          color: #bbb;
        }
        .overview-unit {
          margin-right: 4px;
          font-size: 13px;
          color: #aaa;
        }
      }
    }

  }

  .type-card {
    height: 360px;
    margin-bottom: var(--card-margin-bottom);
    
    .type-wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;

      .type-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 80px;
        background: linear-gradient(to right, #062F6855, #054F7F);
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        .icon-wrap {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: -20px;
          width: 120px;
          height: 120px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url("../../../../assets/imgs/img_tb.png");
          font-size: 22px;
          font-weight: bold;
        }
        .content-wrap {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 70%;
          .content-item {
            display: flex;
            flex-direction: column;
            .content-item-value { 
              font-size: 24px;
              font-weight: bold;
              text-align: center;
              color: #00DDFF;
            }
            .content-item-unit {
              font-size: 14px;
              text-align: center;
              .unit {
                color: #aaa;
              }
            }
          }
        }
      }
      .type-box:nth-child(even) {
        flex-direction: row-reverse;
        .content-wrap .content-item .content-item-value {
          color: #01EFCF;
        }
      }
      .type-box:last-child {
        background: linear-gradient(to right, #20667B, #0C213955);
      }
    }
  }

  .area-card {
    height: 315px;

    .flex{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .box {
        width: 32%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 10px;
        color: #ddd;
        // background: linear-gradient(90deg, #072f59 0%, #08062f 100%);
        // background-image: url('@/assets/imgs/house_rent_bg.png');
        // background-repeat: no-repeat;
        // background-size: 100% 100%;
        .box-title { 
          text-align: center;
        }
        .box-value { 
          text-align: center;
          .value { 
            font-size: 20px;
            font-weight: bold;
            color: #02ADD3;
          }
        }

        .img {
          width: 100%;
          height: 120px;
        }

      }
      .box:nth-child(2) {
        .value {
          color: #00FAD9;
        }
      }
      .box:nth-child(3) {
        .value {
          color: #FDEF9D;
        }
      }
    }
  }
}
</style>
